<template>
    <div id="wrapper" class="container">
        <el-card class="box-card m-t m-b-lg">
            <div slot="header" class="clearfix">
                <el-page-header @back="backToList" content="主项目列表">
                </el-page-header>
            </div>
            <el-row>
                <h3 class="m-b-lg">
                    <i class="el-icon-notebook-2"></i> 基本信息
                </h3>
                <el-row class="m-t"
                    ><label class="label-bold m-b">项目名称</label>
                    <p class="f4">{{ projectBasicInfo.name }}</p></el-row
                >
                <el-row class="m-t"
                    ><label class="label-bold m-b">创建日期</label>
                    <p class="f4">{{ projectBasicInfo.create_date }}</p></el-row
                >
                <el-row class="m-t"
                    ><label class="label-bold m-b">项目概述</label>
                    <p class="f4 project-summary">
                        {{ projectBasicInfo.summary }}
                    </p></el-row
                >
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <h3 class="m-b-lg">
                    <i class="el-icon-s-marketing"></i> 项目阶段
                </h3>
                <el-steps style="margin: 15px 32px 32px 32px">
                    <el-step title="预研" :status="phaseStatus(0)"></el-step>
                    <el-step title="正式" :status="phaseStatus(1)"></el-step>
                    <el-step title="维护" :status="phaseStatus(2)"></el-step>
                    <el-step
                        title="量产销售"
                        :status="phaseStatus(3)"
                    ></el-step>
                    <el-step
                        title="量产维护"
                        :status="phaseStatus(4)"
                    ></el-step>
                </el-steps>
                <el-table :data="tableData" border>
                    <el-table-column
                        fixed
                        prop="phase_name"
                        label="阶段"
                        width="150"
                    >
                    </el-table-column>
                    <el-table-column fixed label="项目" min-width="250">
                        <template slot-scope="scope">
                            <el-badge
                                v-for="project in scope.row.sub_projects"
                                v-bind:key="project.id"
                                :value="project.latest.status"
                                class="item"
                            >
                                <el-button
                                    size="mini"
                                    @click="goSubProject(project.id)"
                                    >{{ project.name }}</el-button
                                >
                            </el-badge>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="230">
                        <template slot-scope="scope">
                            <el-button
                                @click="
                                    handleCreateSubproject(
                                        scope.row.sub_projects[0].id
                                    )
                                "
                                type="text"
                                size="small"
                                icon="el-icon-plus"
                                :disabled="
                                    !canAddForm(
                                        scope.row.phase_id,
                                        scope.row.sub_projects[0].forms.length,
                                        scope.row.sub_projects[0].bindings
                                            .length
                                    )
                                "
                                >立项</el-button
                            >
                            <el-button
                                @click="dialogFormVisible = true"
                                type="text"
                                size="small"
                                icon="el-icon-link"
                                :disabled="
                                    !canAddForm(
                                        scope.row.phase_id,
                                        scope.row.sub_projects[0].forms.length,
                                        scope.row.sub_projects[0].bindings
                                            .length
                                    )
                                "
                                >绑定OA项目</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <h3 class="m-b-lg">
                    <i class="el-icon-s-marketing"></i> 各阶段汇总(已归档)
                </h3>
                <el-table
                    :data="summaryTableData"
                    :span-method="objectSpanMethod"
                    v-loading="loadingSummaryTableData"
                    border
                >
                    <el-table-column
                        fixed
                        label="项目阶段"
                        width="150"
                        prop="phase"
                    >
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="项目名称"
                        min-width="150"
                        prop="project_name"
                    >
                    </el-table-column>
                    <el-table-column fixed label="预计收入(原币)" width="150">
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.est_income_raw | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="预计收入(人民币)"
                        width="150"
                        prop="est_income"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.est_income | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="预计投入(人民币)"
                        width="150"
                        prop="est_cost"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.est_cost | num45Filter }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="预计毛利率"
                        width="150"
                        prop="profit_rate"
                    >
                        <template slot-scope="scope">
                            <span
                                >{{
                                    scope.row.profit_rate | num45Filter
                                }}%</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="预计投入人月数"
                        width="150"
                        prop="total_man_month"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.total_man_month | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="人均收入(人民币)"
                        width="150"
                        prop="avg_income_RMB"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.avg_income_RMB | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="人均成本(人民币)"
                        width="150"
                        prop="avg_cost_RMB"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.avg_cost_RMB | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <h3 class="m-b-lg">
                    <i class="el-icon-s-marketing"></i> 综合经济效益预测
                </h3>
                <el-table
                    :data="differenceTableData"
                    v-loading="loadingDiffTableData"
                    border
                >
                    <el-table-column
                        fixed
                        label="申请类型"
                        width="150"
                        prop="apply_type"
                    ></el-table-column>
                    <!-- <el-table-column
                        fixed
                        label="币种"
                        width="150"
                        prop="currency"
                    ></el-table-column> -->
                    <el-table-column
                        fixed
                        label="折算汇率"
                        width="150"
                        prop="exchange_rate"
                    ></el-table-column>
                    <el-table-column
                        fixed
                        label="预计投入(人民币)"
                        width="150"
                        prop="est_cost"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.est_cost | num45Filter }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="预计毛利率"
                        width="150"
                        prop="profit_rate"
                    >
                        <template slot-scope="scope">
                            <span
                                >{{
                                    scope.row.profit_rate | num45Filter
                                }}%</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="预计投入人月数"
                        width="150"
                        prop="total_man_month"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.total_man_month | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="人均收入(人民币)"
                        width="150"
                        prop="avg_income_RMB"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.avg_income_RMB | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed
                        label="人均成本(人民币)"
                        width="150"
                        prop="avg_cost_RMB"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                scope.row.avg_cost_RMB | num45Filter
                            }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>
        <el-dialog title="绑定至OA项目" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-select
                    v-model="form.project_name"
                    @change="handleProjectNameChanged"
                    placeholder="请选择已立项项目"
                >
                    <el-option
                        v-for="project in archivedProjects"
                        v-bind:key="project.project_name"
                        :label="project.project_name"
                        :value="project.id"
                    ></el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<style>
.container {
    padding: 32px 32px 0 32px;
}

.container h3 {
    font-weight: 600;
}

.page-title-holder {
    border-bottom: 1px solid #dbdbdb;
}

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.m-b {
    margin-bottom: 15px;
}

.m-b-lg {
    margin-bottom: 35px;
}

.m-t {
    margin-top: 15px;
}

.page-title {
    margin: 16px 0;
    font-size: 1.75em;
    font-weight: 600;
    color: #303030;
}

.page-title-controls {
    margin-left: auto;
}

.label-bold {
    font-weight: 600;
}

.f4 {
    font-size: 16px !important;
    font-weight: 400;
}

.project-summary {
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}

.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>

<script>
import { getName } from '@/utils/auth';

export default {
    data() {
        return {
            projectId: this.$route.params.id,
            projectBasicInfo: {},
            projectPhaseList: [],
            tableData: [],
            dialogFormVisible: false,
            archivedProjects: [],
            form: {},
            formLabelWidth: '120px',
            summaryTableData: [],
            loadingSummaryTableData: true,
            differenceTableData: [],
            loadingDiffTableData: true
        };
    },
    filters: {
        num45Filter(amount, decimalCount = 2, decimal = '.', thousands = ',') {
            try {
                decimalCount = Math.abs(decimalCount);
                decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

                const negativeSign = amount < 0 ? '-' : '';
                let tempVal = Math.pow(10, 2);
                let i = parseInt(
                    (amount = Math.abs(
                        Number(Math.round(amount * tempVal) / tempVal) || 0
                    ).toFixed(decimalCount))
                ).toString();
                let j = i.length > 3 ? i.length % 3 : 0;

                return (
                    negativeSign +
                    (j ? i.substr(0, j) + thousands : '') +
                    i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousands) +
                    (decimalCount
                        ? decimal +
                          Math.abs(amount - i)
                              .toFixed(decimalCount)
                              .slice(2)
                        : '')
                );
            } catch (e) {
                console.log(e);
            }
        }
    },
    methods: {
        getProject() {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/parent_project/${this.projectId}`
                )
                .then(response => {
                    this.projectBasicInfo = response.data;
                });
        },
        getPhase() {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/phase/${this.projectId}`
                )
                .then(response => {
                    this.tableData = response.data.data;
                });
        },
        getSummary() {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/summary/${this.projectId}`
                )
                .then(response => {
                    this.summaryTableData = response.data.data;
                    this.loadingSummaryTableData = false;
                });
        },
        getDiff() {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/diff/${this.projectId}`
                )
                .then(response => {
                    this.differenceTableData = response.data.data;
                    this.loadingDiffTableData = false;
                });
        },
        canAddForm(phaseId, formCount, bindCount) {
            if (bindCount === 0 && formCount === 0) {
                return true;
            } else {
                return false;
            }
        },
        canAddSubProject(phaseId, projectCount) {
            if (projectCount === 0) {
                return true;
            } else {
                return false;
            }
        },
        backToList() {
            this.$router.push({
                name: 'parentProjectList'
            });
        },
        rowStyle(row, rowIndex) {
            return { height: '55px' };
        },
        handleCreateSubproject(subProjectId) {
            this.$axios
                .post(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/form/create`,
                    {
                        sub_project_id: subProjectId
                    }
                )
                .then(response => {
                    if (response.data.code === 201) {
                        this.$message.success('成功创建表单');
                        this.getPhase();
                        this.$router.push({
                            name: 'edit',
                            params: {
                                id: response.data.data.form_id
                            }
                        });
                    } else {
                        this.$message.error('新建子项目失败，暂不支持');
                    }
                });
        },
        phaseStatus(phaseId) {
            if (this.tableData.length > 0) {
                let sub_projects = this.tableData[phaseId]['sub_projects'][0];
                if (
                    sub_projects.forms.length > 0 ||
                    sub_projects.bindings.length > 0
                ) {
                    if (sub_projects.latest.status_code === 9) {
                        return 'success';
                    } else {
                        return 'process';
                    }
                } else {
                    return 'wait';
                }
            }
        },
        goSubProject(subProjectId) {
            this.$router.push({
                name: 'subProject',
                params: {
                    id: this.projectId,
                    subProjectId: subProjectId
                }
            });
        },
        queryArchivedProjects() {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/project`,
                    {
                        params: {
                            status: 9,
                            ldap: getName()
                        }
                    }
                )
                .then(response => {
                    this.archivedProjects = response.data.data;
                });
        },
        handleProjectNameChanged(oaProjectId) {
            this.BindOAProject(oaProjectId);
        },
        BindOAProject(subProjectId, oaProjectId) {
            this.$axios
                .post(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/project/bind`,
                    {
                        sub_project_id: subProjectId,
                        oa_project_id: oaProjectId
                    }
                )
                .then(response => {
                    if (response.data.code === 201) {
                        this.$message.success('绑定成功');
                        this.getPhase();
                    } else {
                        this.$message.error('绑定失败');
                    }
                });
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                return {
                    rowspan: row.rowspan,
                    colspan: 1
                };
            }
        }
    },
    created() {
        this.getProject();
        this.getPhase();
        this.queryArchivedProjects();
        this.getSummary();
        this.getDiff();
    }
};
</script>
